/**
 * JavaScript principal index, permite cargar el login de la aplicacion
 *
 * @autor dmazo
 * @date 24/06/2014
 */
 
 $( document ).ready( init );

function init(){
	try{

		//Carga de login
		//cargarLogin();
		
		$( "#btn_login" ).click(function( event ) {
			removeComponent( 'comp_login' );
			cargarMenu();
		});
		
		$( "#btn_home" ).click(function( event ) {
			removeComponent( 'comp_menu' );
			removeComponent( 'comp_login' );
			cargarLogin();
		});
		
	}catch (e) {
		alert(e.message);
	}
}

/**
 * Metodo que permite la carga del div login,
 * para el inicio de sesion.
 */
function cargarLogin(){
	
	try{
	
		var _html = "";
		_html+="<div id='comp_login'>";
		_html+="	<br class='clear' /> <br class='clear' /> <br class='clear' /> <br";
		_html+="		class='clear' /> <br class='clear' /> <br class='clear' /> <br";
		_html+="		class='clear' /> <br class='clear' /> <br class='clear' />";
		_html+="";
		_html+="	<div class='ui-grid-login'>";
		_html+="		<div data-role='fieldcontain' class='ui-block-a'";
		_html+="			style='width: 70%;'>";
		_html+="			<table style='left: 10%; width: 90%; margin-left: 10px;'>";
		_html+="				<tr>";
		_html+="					<td><input type='text' name='txi_usuario' id='txi_usuario'";
		_html+="						placeholder='Usuario' /></td>";
		_html+="				</tr>";
		_html+="				<tr>";
		_html+="					<td class='txi_style'><input type='password'";
		_html+="						name='pwi_contrasena' id='pwi_contrasena'";
		_html+="						placeholder='Contraseña' /></td>";
		_html+="				</tr>";
		_html+="			</table>";
		_html+="		</div>";
		_html+="		<div class='ui-block-b' style='width: 30%;'>";
		_html+="			<img class='ul_login' border=0 id='btn_login' name='btn_login' />";
		_html+="		</div>";
		_html+="	</div>";
		_html+="";
		_html+="	<br class='clear' /> <br class='clear' /> <br class='clear' /> <br";
		_html+="		class='clear' /> <br class='clear' /> <br class='clear' /> <br";
		_html+="		class='clear' /> <br class='clear' /> <br class='clear' /> <br";
		_html+="		class='clear' />";
		_html+="</div>";

		addComponent( _html );
	}catch( e ){
		alert( "Error cargando login" );
	}
}

/**
 * Metodo que permite la carga del div del menu,
 * despues de iniciar secion.
 */
function cargarMenu(){
	
	try{
	
		var _html = "";
		_html+="<div id='comp_menu' name='comp_menu' > ";
		_html+="<br class='clear' /><br class='clear' /><br class='clear' /><br class='clear' /><br class='clear' /><br class='clear' />";
		_html+="	<table width='50%' align='center'>";
		_html+="		<tr>";
		_html+="			<td style='text-align: center;'>";
		_html+="				<img class='ul_clientes' id='btn_abrirClientes'/>";
		_html+="			</td>";
		_html+="			<td style='text-align: center;'>";
		_html+="				<img class='ul_producto'/>";
		_html+="			</td>";
		_html+="			<td  style='text-align: center;'>";
		_html+="				<img class='ul_devolucion'/>";
		_html+="			</td>";
		_html+="		</tr>";
		_html+="		<tr>";
		_html+="			<td style='text-align: center;' ><b>Clientes</b></td>";
		_html+="			<td  style='text-align: center;'><b>Producto</b></td>";
		_html+="			<td  style='text-align: center;'><b>Devolución</b></td>";
		_html+="		</tr>";
		_html+="		<tr>";
		_html+="			<td  style='text-align: center;'>";
		_html+="				<img class='ul_premio'/>";
		_html+="			</td>";
		_html+="			<td  style='text-align: center;'>";
		_html+="				<img class='ul_factura'/>";
		_html+="			</td>";
		_html+="			<td  style='text-align: center;'>";
		_html+="				<img class='ul_registro'/>";
		_html+="			</td>";
		_html+="		</tr>";
		_html+="		<tr>";
		_html+="			<td style='text-align: center;'><b>Premio</b></td>";
		_html+="			<td style='text-align: center;'><b>Factura</b></td>";
		_html+="			<td style='text-align: center;'><b>Registro</b></td>";
		_html+="		</tr>";
		_html+="	</table>";
		_html+="<br class='clear' /><br class='clear' /><br class='clear' /><br class='clear' /><br class='clear' /><br class='clear' /><br class='clear' /><br class='clear' />";
		_html+="</div>";

		addComponent( _html );
	}catch( e ){
		alert( "Error cargando menu" );
	}
}


/**
 * SECCION QUE PERMITE REMOVER Y AGREGAR
 * LAS NUEVAS SECCIONES DE LA APLICACION.
 */
function addComponent(  _html ) {

	$( ".div_content" ).append(  _html );
}

function removeComponent( _id ) {
	try {
		var div = document.getElementById( _id );
		if (div) {
			div.parentNode.removeChild(div);
		}
	} catch (e) {
		// TODO: handle exception
		alert( "Error removiendo componente "+e.message );
	}
}

/**
 * FIN ADDCOMPONENT Y REMOVECOMPONENT
 */